<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Heatmap Layer</title>
    <link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
<script type="text/javascript">

require(["dojo/ready", "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/request/xhr", "dojo/_base/json"],
		function(ready, dom, on, array, xhr, jsn){
    var taxiData = [
 /*                   new google.maps.LatLng(37.782551, -122.445368),
                    new google.maps.LatLng(37.782745, -122.444586),
                    new google.maps.LatLng(37.782842, -122.443688),
                    new google.maps.LatLng(37.782919, -122.442815),
                    new google.maps.LatLng(37.782992, -122.442112),
                    new google.maps.LatLng(37.783100, -122.441461),
                    new google.maps.LatLng(37.783206, -122.440829),
                    new google.maps.LatLng(37.783273, -122.440324),
                    new google.maps.LatLng(37.783316, -122.440023),
                    new google.maps.LatLng(37.783357, -122.439794),
                    new google.maps.LatLng(37.783371, -122.439687),
                    new google.maps.LatLng(37.783368, -122.439666),
                    new google.maps.LatLng(37.783383, -122.439594),
                    new google.maps.LatLng(37.783508, -122.439525),
                    new google.maps.LatLng(37.783842, -122.439591),
                    new google.maps.LatLng(37.784147, -122.439668),
                    new google.maps.LatLng(37.784206, -122.439686),
                    new google.maps.LatLng(37.784386, -122.439790),
                    new google.maps.LatLng(37.784701, -122.439902),
                    new google.maps.LatLng(37.784965, -122.439938),
                    new google.maps.LatLng(37.785010, -122.439947),
                    new google.maps.LatLng(37.785360, -122.439952),
                    new google.maps.LatLng(37.785715, -122.440030),
                    new google.maps.LatLng(37.786117, -122.440119),
                    new google.maps.LatLng(37.786564, -122.440209),
                    new google.maps.LatLng(37.786905, -122.440270),
                    new google.maps.LatLng(37.786956, -122.440279),*/
                    new google.maps.LatLng(37.800224, -122.433520)];
	ready(function (){
		var pointArray,heatmap,map;
		var map = new google.maps.Map(dom.byId("testmap"),{
			zoom:13,
			center: new google.maps.LatLng(37.774546, -122.433523),
			mapTypeId:google.maps.MapTypeId.SATELLITE
		});
		var update = function(itms){
			var items = taxiData.concat(array.map(itms, function(elm){
				return new google.maps.LatLng(elm.lat, elm.lng);
			}));
			pointArray = new google.maps.MVCArray(items);
			heatmap = new google.maps.visualization.HeatmapLayer({
		          data: pointArray
	        });

		    heatmap.setMap(map);

		};
	    on(dom.byId("toggleHeatmap"), "click", function(){
	        heatmap.setMap(heatmap.getMap() ? null : map);
	    });				
	    on(dom.byId("changeGradient"), "click", function(){
	        var gradient = [
	                        'rgba(0, 255, 255, 0)',
	                        'rgba(0, 255, 255, 1)',
	                        'rgba(0, 191, 255, 1)',
	                        'rgba(0, 127, 255, 1)',
	                        'rgba(0, 63, 255, 1)',
	                        'rgba(0, 0, 255, 1)',
	                        'rgba(0, 0, 223, 1)',
	                        'rgba(0, 0, 191, 1)',
	                        'rgba(0, 0, 159, 1)',
	                        'rgba(0, 0, 127, 1)',
	                        'rgba(63, 0, 91, 1)',
	                        'rgba(127, 0, 63, 1)',
	                        'rgba(191, 0, 31, 1)',
	                        'rgba(255, 0, 0, 1)'
	                      ]
	                      heatmap.setOptions({
	                        gradient: heatmap.get('gradient') ? null : gradient
	                      });
	    });
	    on(dom.byId("changeRadius"), "click", function(){
	        heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});

	    });
	    on(dom.byId("changeOpacity"), "click", function(){
	        heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
	    });
	    google.maps.event.addListener(map, 'click', function(e){
	    	xhr("/api/location",{
	    		method:"POST",
	    		handleAs:"json",
	    		data:jsn.toJson({
	    			lat:e.latLng.lat(),
	    			lng:e.latLng.lng(),
	    			content:"test"
	    		})
	    		
	    		}).then(function(data){
	    			update(data.items);
	    		}, function(error){
	//    			console.log("error on post: " + error);
	    		}, function(evt){
	    			
	    		});
	    	});
	    xhr("/api/location", {
			method: "GET",
			handleAs:"json"
			}).then(function(data){
				update(data.items);
			},
			function(error){
//				console.log(error);
			},
			function (evt){
				
			});

	});
});
</script>
<body class="claro">
testtest
<div id="testmap" style="width:600px;height:400px;"></div>
    <button id="toggleHeatmap">Toggle Heatmap</button>
    <button id="changeGradient">Change gradient</button>
    <button id="changeRadius">Change radius</button>
    <button id="changeOpacity">Change opacity</button>
</body>
</html>